﻿@import "variables";

html, body														{ .height-100; font-family: 'Segoe UI', 'Helvetica', 'Arial', sans-serif; background-color: darken(@grey-base, 20%); }
.popupRoot														{ display: none; }


.msacademic { 

	/* Global rule set */
	position: relative; background-color: @bg-base; color: @text-base;
	a													{ text-decoration: none; color: @orange-base; cursor: pointer; 
														  -webkit-transition: color 0.2s ease-out; -moz-transition: color 0.2s ease-out; -ms-transition: color 0.2s ease-out; -o-transition: color 0.2s ease-out; transition: color 0.2s ease-out;}
	a:hover												{ color: darken(@orange-base, 10%); }
	
	/* Menu markings */
	&.home .header .menu-and-search .home a				{ color: @orange-base; font-weight: bold; }
	&.news .header .menu-and-search .news a				{ color: @orange-base; font-weight: bold; }
	&.articles .header .menu-and-search .articles a		{ color: @orange-base; font-weight: bold; }
	&.microsofts-and-students .header .menu-and-search .microsofts-and-students a		{ color: @orange-base; font-weight: bold; }

	/* Children */
	.inner												{ width: 1140px; margin: 0 auto; position: relative; 
														  -webkit-transition: width 150ms ease-out; -moz-transition: width 150ms ease-out; -ms-transition: width 150ms ease-out; -o-transition: width 150ms ease-out; transition: width 150ms ease-out; }

	.header												{ position: fixed; top: 0; z-index: 2; width: 100%; background-color: @bg-base;  }
	.header .ui-visible-mobile							{ display: none; }
	.header .inner										{ border-bottom: 1px solid @orange-base; background-color: @bg-base;   
														  position: relative; height: 45px; z-index: 3; }
	.header .inner .logo								{ opacity: 0.9; position: absolute; bottom: 5px; left: 0; font-weight: 600; font-size: 26px; letter-spacing: -1px; color: @text-base; }
	.header .inner .logo:hover							{ opacity: 1.0; }
	.header .inner .logo:active							{ bottom: 4px; left: 1px; }
	
	.header .menu-and-search							{ position: absolute; right: 0; bottom: -1px; }
	.header .menu-and-search li							{ display: block; float: left; padding-right: 15px; padding-top: 6px; line-height: 30px; }
	.header .menu-and-search li a						{ display: block; font-size: 14px; font-weight: 500; padding: 4px; 
														  text-transform: uppercase; color: @grey-base;}
	.header .menu-and-search li a:hover					{ color: @orange-base;}
	.header .menu-and-search .search					{ padding-right: 0; line-height: 25px; }
	.header .menu-and-search .search a					{ font-size: 18px; border: 1px solid @orange-base; overflow: hidden;  }
	.header .menu-and-search .search a input			{ display: none; padding: 0; border-color: transparent; }

	
	.header .beta										{ position: absolute; right: 0; top: 0; z-index: 2; width: 34px;}
	.header .beta img									{ max-width: 100%; }
	
	.content											{ padding-top: 60px; }
	
	
	.footer												{ color: white; background-color: darken(@grey-base, 20%); padding: 25px 0; margin-top: 50px; }
	
	.footer .inner .logo								{ .img-link; padding-top: 15px; width: 100px; opacity: 0.9; 
														  background: url('/Content/Images/logo-white-small.png') no-repeat top left; }
	.footer .inner .logo:hover							{ opacity: 1.0; }
	.footer .inner .logo:active							{ background-position: 1px 1px; }
	.footer .menu-and-search							{ padding-top: 15px; }
	.footer .menu-and-search li							{ display: inline-block; padding-right: 15px;}
	.footer .menu-and-search li a						{ font-size: 11px; opacity: 0.8; font-weight: 500; padding: 4px 0; text-transform: uppercase; color: white;}
	.footer .menu-and-search li a:hover					{ opacity: 1.0; }
}

.msacademic { 
	.error-page											{ text-align: center; position: relative; display: block; }
}

/* Responsive design
==================================================== */
@media all and (max-width: 1600px) {
    .msacademic { 
		.inner												{ width: 980px; margin: 0 auto; position: relative; }
		.content											{ padding-top: 55px; }
		.header .beta										{ width: 28px;}
		.header .inner										{ height: 40px; }
		.header .inner .logo								{ width: 120px; }
		.header .menu-and-search li							{ line-height: 25px; }
		.header .menu-and-search li a						{ font-size: 12px; }
		.header .menu-and-search .search					{ line-height: 23px; }
		.header .menu-and-search .search a					{ font-size: 14px; }
    }
}
@media all and (max-width: 1024px) {
    .msacademic { 
		img													{ max-width: 100%; }
		.inner												{ width: 87%; }
		.header .beta										{ display: none; }
		.header .ui-state-hidden							{ display: none; }
		.header .ui-visible-desktop							{ display: none; }
		.header .ui-visible-mobile							{ display: block; }

		.header .inner										{ height: auto; }


		.header .mobile-menu .header-content				{ padding: 5px 0 3px 0; }
		.header .mobile-menu .header-content .home img		{ height: 30px; }
		.header .mobile-menu .menu-opener 					{ font-size: 24px; float: right; cursor: pointer; }
		.header .mobile-menu .menu-opener:hover,
		.header .mobile-menu .menu-opener:active			{ color: @orange-base; }

		.header .menu-and-search							{ width: 100%; position: relative; }
		.header .menu-and-search							{ }
		.header .menu-and-search li							{ float: none; border-top: 1px solid lighten(@border-base-color, 10%); }
		.header .menu-and-search li a						{ font-size: 16px; padding: 7px 0px 9px 0; line-height: 24px;}		
		.header .menu-and-search .search					{ line-height: auto; }
		.header .menu-and-search .search a					{ border: 0; font-size: 16px; }
					   
    }
}
@media all and (max-width: 600px) {
    .msacademic { 
		.content											{ padding-top: 85px; }
		.inner												{ width: 92%; }
	
		.header .content									{ padding-top: 80px; }

    }
}

